<%--
  Created by IntelliJ IDEA.
  User: 廉壮
  Date: 2023/5/17
  Time: 9:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>朋友圈</title>
    <meta charset="UTF-8">
    <script src="${ctx}/static/js/jquery.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .post {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 5px;
        }

        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .post-avatar img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #ccc;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .post-username {
            font-weight: bold;
            font-size: 16px;
            color: #333;
        }

        .post-date {
            color: #999;
            font-size: 12px;
            margin-left: auto;
        }

        .post-content {
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
            line-height: 1.5;
        }

        .post-img {
            max-width: 100%;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        .post-likes {
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
            position: relative;
            left: 60px;
        }

        .post-likes:hover {
            color: #333;
            cursor: pointer;
        }

        .post-comments {
            margin-top: 10px;
            padding-top: 10px;
            /*border-top: 1px solid #ccc;*/
        }

        .post-comment {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

        }

        .post-comment-avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #ccc;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            top: -38px
        }

        .post-comment-username {
            font-weight: bold;
            font-size: 14px;
            color: #333;
        }

        .post-comment-text {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        .post-comment-btn {
            background-color: #3897f0;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
            margin-left: auto;
        }

        .post-comment-input {
            flex: 1;
            height: 30px;
            border: none;
            border-radius: 5px;
            padding: 5px;
            margin-right: 10px;
        }

        .post-comment-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px #3897f0;
        }

        .post-con {
            position: relative;
            left: 60px;
            /*position: relative;*/
            /*left: -120px;*/
            /*top: 83px;*/
        }

        .name {
            font-size: 20px;
            font-weight: bold;
            position: relative;
            top: -30px;
        }

        .post-he {
            height: 150px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
            padding: 20px;
            padding-top: 0px;
            border-radius: 5px;
        }

        .p-he {
            position: relative;
            top: 20px;
            left: 606px;
        }

        .p-he img {
            border-radius: 10px;
        }

        .add {
            background-color: #30c1ff;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
            position: relative;
            left: 632px;
            top: 20px;
            border-radius: 6px;
        }

        /*.btn {*/
        /*    position: relative;*/
        /*    top: -45px;*/
        /*}*/
        .img {
            position: relative;
            top: -30px;
            left: 78px;
        }

        /*.post-com{*/
        /*    position: relative;*/
        /*    top: -50px;*/
        /*}*/
    </style>
</head>
<body>
<div class="container">
    <div class="post-he" style="padding-bottom: 10px;">
        <button class="add">发表朋友圈</button>
        <p class="p-he">
            <label class="name">${user.username}</label>
            <img src="${ctx}/common/getImage?image=${user.image}" alt="" width="100px" height="100px">
        </p>
    </div>

    <div>
        <%--            朋友圈--%>
        <c:forEach items="${topicList}" var="topic">
            <div class="post">
                <c:forEach items="${userList}" var="user">
                    <c:if test="${topic.userId==user.id}">
                        <div class="post-header">

                            <div class="post-header">
                                <div class="post-avatar">
                                    <img src="${ctx}/common/getImage?image=${user.image}">
                                </div>
                                <div>
                                    <div class="post-username">${user.username}</div>
                                    <div class="post-date">${topic.time}</div>
                                </div>
                            </div>
                        </div>
                        <div class="post-con">
                                <%--                                <input type="hidden" name="topicId" value="${topic.id}">--%>
                            <div class="post-content">
                                    ${topic.message}
                            </div>
                            <c:if test="${topic.image != ''}">
                                <img class="post-img" src="${ctx}/common/getImage?image=${topic.image}"
                                     width="200px">
                            </c:if>
                            <c:if test="${comment.image == ''}">
                                <div style="width: 200px;height: 80px">
                                    <img class="post-img" src="${ctx}/common/getImage?image=${topic.image}"
                                         height="80px"
                                         width="200px" hidden="hidden">
                                </div>
                            </c:if>
                                <%--                                <img class="post-img" src="/common/getImage?image=${topic.image}" width="200px">--%>
                        </div>
                        <div class="post-likes">${topic.num}条评论</div>
                    </c:if>
                </c:forEach>
                <hr>
                <c:forEach items="${commentList}" var="comment">
                    <c:if test="${comment.topicId==topic.id}">
                        <%--评论区--%>
                        <div class="post-comments">
                            <div class="post-comment">
                                <div class="post-comment-avatar">
                                    <img src="${ctx}/common/getImage?image=${user.image}">
                                </div>
                                <div class="post-com">
                                    <c:forEach items="${userList}" var="user">
                                        <c:if test="${comment.userId==user.id}">
                                            <div class="post-comment-username">${user.username}</div>
                                        </c:if>
                                    </c:forEach>
                                    <div class="post-comment-text">${comment.message}</div>
                                    <c:if test="${comment.image != ''}">
                                        <img src="${ctx}/common/getImage?image=${comment.image}" height="80px"
                                             width="200px">
                                    </c:if>
                                    <c:if test="${comment.image == ''}">
                                        <div style="width: 200px;height: 80px">
                                            <img src="${ctx}/common/getImage?image=${comment.image}" height="80px"
                                                 width="200px" hidden="hidden">
                                        </div>
                                    </c:if>

                                </div>
                                <input type="text" style="display: none" value="${comment.id}">
                                <input type="button" class="post-comment-btn delete-com" value="删除">
                            </div>

                        </div>
                    </c:if>
                </c:forEach>
                <form action="${ctx}/comments/add">
                    <div class="post-comment">
                        <input class="post-comment-input" type="text" name="message" placeholder="请填写评论">
                        <input class="image" name="image" type="text" value="" style="display: none">
                        <input type="hidden" name="topicId" value="${topic.id}">
                        <input type="submit" class="post-comment-btn add-com" value="发表">
                    </div>
                </form>
                <button class="post-comment-btn btn">上传</button>
                <div>
                    <form action="">
                        <input type="file" class="file" name="file" style="display: none">
                    </form>
                        <%--                        <img id="img" src="https://via.placeholder.com/1x1.png" height="89px" width="250px"/>--%>
                    <img class="img" src="" height="89px" width="250px" style="display: none"/>
                </div>

            </div>
        </c:forEach>
    </div>
    </form>
</div>
</body>
<script>
    $(function () {
        $(".btn").on("click", function () {
            $(this).next().children("form").children("input").click();
            return false;
        })

        $(".file").change(function () {
            let img = $(this).parent().next();
            let image = img.parent().prev().prev().children().children().eq(1);
            $.ajax({
                url: "${ctx}/common/uploadOne",
                type: "POST",
                // data: new FormData($("form")[0]),
                data: new FormData($(this).parent()[0]),
                processData: false,		//是否将数据序列化成查询字符串，默认为true
                contentType: false,		//设置为false，否则默认是表单内容
                success: function (e) {
                    console.log(e);
                    console.log(img);
                    if (e == "err") {
                        alert("上传失败");
                    } else {
                        img.attr("src", "${ctx}/common/getImage?image=" + e);
                        img.show();
                        image.attr("value", e)
                    }
                }
            })
        })

        $(".add").click(function () {
            location.href = '${ctx}/addMoment.jsp';
        })

        $(".add-com").on("click", function () {
            let topicId = $(this).prev().val();
            let image = $(this).prev().prev().val();
            let message = $(this).prev().prev().prev().val();
            let data = {
                topicId: topicId,
                image: image,
                message: message
            }


            // if ($(this).prev().val() == '') {
            if ($(this).parent().children().eq(0).val() == ''&&$(this).parent().children().eq(1).val() == '') {
                alert("不能为空")
            } else {
                $.get('${ctx}/comments/add', data, function (e) {
                    if (e == "ok") {
                        location.reload();
                    } else {
                        alert("添加失败");
                    }
                })
            }
            return false;
        })

        /**
         * 删除
         */
        $(".delete-com").on("click", function () {
            let id = $(this).prev().val();
            $.get('${ctx}/comments/delete?id=' + id, function (e) {
                if (e == "ok") {
                    location.reload();
                } else {
                    alert("添加失败");
                }
            })
            return false;
        })

    })
</script>
</html>
